<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form>
			<label for="">用户名:<input type="text" name='username' id='username' /></label>
			<label for="">用户名:<input type="text" name='password' id='password' /></label>
			<span id='info'></span>
			<input type="button" value="登录" id='btn' />
		</form>
		<script src='jquery.js'></script>
		<script>
			$(function() {
				$("#btn").on("click", function() {
					if($()) {

					}
					$.ajax({
						type: 'get',
						data: 'username=' + $("#username").val() + '&password=' + $("#password").val(),
						url: 'ajaxJq.php',
						success: function(data) {
							if(data == "登陆成功") {
								$("#info").html("登陆成功");
							} else if(data == "密码错误") {
								$("#info").html("密码错误");
							} else if(data == "用户名不正确") {
								$("#info").html("用户名不正确");
							}
						}

					});
				});
			});
		</script>
		<script>
			window.onload = function() {
				var btn = document.querySelector("#btn");
				btn.onclick = function() {

					//					//1.创建XMLHttpRequest()实例对象
					//					var x = new XMLHttpRequest();
					//					//2.准备发送:
					//					var username = document.querySelector("#username");
					//					var pw = document.querySelector("#password");
					//
					//					var param = 'username=' + username.value + '&password=' + pw.value;
					//					x.open('get', '03 get.php?' + encodeURI(param));
					//					//3.发送:
					//					x.send(null);
					//					//4.检测服务器的响应:
					//					x.onreadystatechange = function() {
					//						if(x.readyState == 4 && x.status == 200) {
					//							var data = x.responseText;
					//							var info = document.querySelector("#info");
					//							if(data == "登陆成功") {
					//								info.innerHTML = "登陆成功";
					//							} else if(data == "密码错误") {
					//								info.innerHTML = "密码错误";
					//							} else if(data == "用户名不正确") {
					//								info.innerHTML = "用户名不正确";
					//							}
					//						}
					//					}

				}
			}
		</script>
	</body>

</html>